<template>
    <div class="component-bottom-popup-select" v-if="value">
        <van-actionsheet :value="true">
            <div class="select-box">
                <p class="title text-gray">{{title}}</p>
                <div class="item" @click="handleSelect(k)" v-for="(item, k) in items">{{item}}</div>
                <div class="item text-gray" v-if="$slots.default"><slot name="default"/></div>
                <div class="close" @click="handleClose">{{clearText || '取消'}}</div>
            </div>
        </van-actionsheet>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-bottom-popup-select{
        .select-box{
            text-align: center;
            .title{
                font-size: 1.4rem;
                line-height: 2.1rem;
                padding: 1.5rem;
                word-break: break-all;

            }
            .item{
                font-size: 1.8rem;
                line-height: 4.8rem;
                border-top: 1px solid @color-line-gray;
            }

            .close{
                font-size: 1.8rem;
                line-height: 4.8rem;
                border-top: .8rem solid @color-bg-gray;
            }
        }

    }
</style>

<script>
    export default {
        props: ['title', 'items', 'value', 'clearText'],
        created(){
            console.log(this)
        },
        methods: {
            handleClose(){
                this.$emit('input', false);
            },
            handleSelect(key){
                this.$emit('onselect', key);
                this.handleClose();
            }
        }
    }
</script>